[Android] めんどくさい！複数解像度に対応した素材の書き出しがラクになる SketchPlugin “sketch-android-assets”

プラグイン導入

今回導入するプラグインはこちら
zmalltalker/sketch-android-assets | Github.com

Sketch にプラグインを追加するには、Application Support のプラグインフォルダに直接ファイルを追加する必要があります。
Sketch のプラグインフォルダはアプリケーションをどこからインストールしたかによって異なるのでご注意ください。

App Store からインストールした場合

~/Library/Containers/com.bohemiancoding.sketch3/Data/Library/Application Support/sketch/Plugins

Bohemian Coding のサイトからインストールした場合

~/Library/Application Support/com.bohemiancoding.sketch3/Plugins

このフォルダに Github からプラグインのリポジトリをクローンします。

#SSH
$ git clone git@github.com:zmalltalker/sketch-android-assets.git

#HTTPS
$ git clone https://github.com/zmalltalker/sketch-android-assets.git

クローンできたら Sketch でプラグインが使用可能になります。非エンジニアのデザイナーには少々煩わしい作業かもしれませんが一度やってしまえばなんてことなくなるでしょう。

使い方

とても簡単に使うことができます。
書き出したいオブジェクトやアートボードを選択して Plugins メニューから Generate Android Assets を実行するか、ショートカット Shift + Command + A を入力するだけです。

プラグインの実行時には何も選択しなくても実行はできますが、何も出力されません。

注：プラグインを使うときはまずファイルを保存しましょう。

基準になる解像度の設定

初めて sketch-android-assets を使った時にこのようなウィンドウが表示されます。

どの解像度を基準として素材を作成しているかを選択してください。
（例：30dp での表示を想定し、60px で素材を作成している場合 => xhdpi）

そうすると、XXX.sketch ファイルのあるフォルダに .android_assets （隠しファイル）というファイルが生成されます。このファイルは前述した基準となる解像度の設定を保持しています。中身はこんな感じ↓

base_density:xhdpi

設定を持っていてくれるのはよいのですが、隠しファイルでこの設定ファイルがいたるところに生成されるのは困ります。そこでホームディレクトリ /Users/yourusername/ に .android_assets を配置すると全ての Sketch ドキュメントにこの設定が適用されます。

個別のファイルに設定を適用したい場合は、対象となるファイルと同じディレクトリに .android_assets を配置すればそちらの設定が優先されます。

なお、.android_assets の設定内容を変更するには現状、当該ファイルを削除して生成しなおすか、直接内容を編集するしかなさそうです。

# 例えばこんな感じで編集
echo "base_density:hdpi" > ~/.android_assets

なにがラクか？

プラグインを実行すると素材の書き出す場所を聞かれるので、Android プロジェクトの drawable フォルダを指定すれば解像度別に自動でフォルダを作成してそれぞれに素材を書き出してくれます。
追加で素材を書き出すときにも、再び drawable フォルダを指定すれば追加分の素材をそれぞれのフォルダに振り分けて書き出してくれます。

こんな感じで直接プロジェクトに素材を追加して git でプッシュすれば、エンジニアがzipを解凍して一つずつファイルを移動させるような生産性のない作業を駆逐することができるでしょう。デザイナーもたった一つの図形を描けばあとはプラグインがよしなにやってくれるので作業の効率化が図れます。

みんな少し幸せになれそう！

それではみなさん楽しい開発ライフを